<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" 
          content="width=device-width, 
                    user-scalable=no, 
                    initial-scale=1.0,
                    maximum-scale=1.0, 
                    minimum-scale=1.0"/>
    <title>Document</title>
    <link type="text/css" rel="stylesheet" href="css/swiper-4.1.6.min.css" />
    <link type="text/css" rel="stylesheet" href="css/chapter2.css" />
    
</head>
<body>
   <!--
   <pre>
        使用swiper插件实现轮播
        1）引入支持文件
            swiper.css
            swiper.js
        2）编写网页代码
            轮播图开始到轮播图结束的Html代码
        3）编写JS代码
            new Swiper...的JS代码，写在swiper.js之后
        4）修改轮播图样式
            swiper-*的css样式，写在swiper.css之后

        媒体查询(Media Queries)
        包含三个特性：
            媒体类型：
                all    所有设备
                Screen 电脑屏幕
                Print  打印用纸或打印预览视图
                Tv     电视机类型设备
                Projection 各种投影设备
                Handheld 便携设备
            关键词：
                and：同时满足这两者时生效，到达限定范围
                only：指定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器
                not：排除某种指定的媒体类型，即排除符合表达式的设备
            媒体特性：
                max- width  数值和单位
                min- width  数值和单位
        语法：
            @media 媒体类型 关键字 (媒体特性){
                CSS样式
            }
            link标签引入：link href="css文件" media="only screen and (max-width：500px) "


   </pre>
    -->
   <!-- 轮播图开始 - - >
   <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img src="images/1.jpg">
            </div>
            <div class="swiper-slide">
                <img src="images/2.jpg">
            </div>
            <div class="swiper-slide">
                <img src="images/3.jpg">
            </div>
            <div class="swiper-slide">
                <img src="images/4.jpg">
            </div>
            <div class="swiper-slide">
                <img src="images/5.jpg">
            </div>
        </div>
        < ! - - 如果需要分页器 - - >
        <div class="swiper-pagination"></div>
    </div>
    < ! - - 轮播图结束 -->

    <div id="div1">
        
    </div>

    <script type="text/javascript" src="js/rem.js"></script>
    <script type="text/javascript" src="js/swiper-4.1.6.min.js" ></script>
    <script type="text/javascript" src="js/chapter2.js"></script>
</body>
</html>
